<template>
  <view class="order">
    <my-header title="商品详情"></my-header>
    <my-content class="content" v-show="resultStatus">
      <view style="visibility: hidden">1</view>
      <view class="address" @click="header(`/pages/address/index?resource=order`)">
        <view class="address_left">
          <image mode="widthFix" src="https://www.dingxians.cn/images/common/location.png" class="address_icon"></image>
          <view class="address_info" v-if="addressData.id">
            <view class="address_user">
              <view class="username">{{ addressData.username }}</view>
              <view class="mobile">{{ addressData.mobile }}</view>
            </view>
            <view class="address_detail">
              {{ addressData.province }}{{ addressData.city }}{{ addressData.area }}{{ addressData.detail }}
            </view>
          </view>
          <view class="address_info none" v-else>请填写地址</view>
        </view>
        <image mode="widthFix" class="address_right" src="https://www.dingxians.cn/images/user/right.png"></image>
      </view>
      <view class="goods_box">
        <view class="goods_info">
          <image mode="widthFix" class="goods_image" :src="orderData.goods_image"></image>
          <view class="goods_item">
            <view class="goods_name">{{ orderData.goods_name }}</view>

            <view class="goods_attr" v-if="orderData.attr_values">
              <text class="goods_attr_value">{{ orderData.attr_values }}</text>
            </view>

            <view class="goods_price_num">
              <view class="goods_price" v-if="type == 2">
                <view>￥</view>
                <view class="goods_price_int">{{ orderData.goods_price }}</view>
              </view>
              <view class="goods_price goods_price_exchange" v-if="type == 3">
                <image
                  mode="widthFix"
                  class="silver_icon"
                  src="http://www.qixdian.cn/upload/20230830/64ef5fa303c81.png"
                ></image>
                <view>{{ orderData.exchange_price }}</view>
              </view>
              <view class="goods_num">x {{ orderData.num }}</view>
            </view>
          </view>
        </view>

        <view class="divier"></view>

        <view class="order_item">
          <view class="order_label">订单类型</view>
          <view class="order_text">商城订单</view>
        </view>
        <view class="order_item">
          <view class="order_label">运费</view>
          <view class="order_text">
            <view class="order_text_icon">￥</view>
            <view class="order_text_int">{{ orderData.freight_amount }}</view>
          </view>
        </view>
        <view class="order_item">
          <view class="order_label">包邮券</view>
          <view class="order_text" v-if="coupon_id">
            <view class="order_text_icon">-￥</view>
            <view class="order_text_int">{{ orderData.freight_amount }}</view>
          </view>
          <view class="order_text" v-else>无</view>
        </view>
        <view class="order_item">
          <view class="order_label">商品总价</view>
          <view class="order_text" v-if="type == 2">
            <view class="order_text_icon">￥</view>
            <view class="order_text_int">{{ orderData.total_price }}</view>
          </view>
          <view class="order_text order_freght_exchange" v-if="type == 3">
            <image
              mode="widthFix"
              class="silver_icon"
              src="http://www.qixdian.cn/upload/20230830/64ef5fa303c81.png"
            ></image>
            <view>{{ orderData.exchange_price }}</view>
          </view>
        </view>

        <view class="order_item remark">
          <view class="order_label">备注信息</view>
          <textarea class="order_remark" placeholder="选填备注信息" />
        </view>
      </view>

      <view class="pay_box">
        <view @click="changeType(item.id)" class="pay_item" v-for="item in pay_type_arr" :key="item.id">
          <view class="pay_left">
            <image mode="widthFix" class="pay_icon" :src="item.pay_icon"></image>
            <view>{{ item.name }}</view>
          </view>
          <image
            mode="widthFix"
            class="pay_selected"
            v-if="pay_type == item.id"
            src="https://www.dingxians.cn/images/common/selected.png"
          ></image>
          <image mode="widthFix" class="pay_selected" v-else src="https://www.dingxians.cn/images/common/unselected.png"></image>
        </view>
      </view>
      <view class="exchange">
        <rich-text :nodes="shipping_info"></rich-text>
      </view>
      <view style="visibility: hidden; margin-top: 100rpx">1</view>
      <view class="bottom">
        <view class="bottom_text">
          <view class="bottom_text_num">
            共
            <span class="light">{{ orderData.num }}</span>
            件 |
          </view>
          <view>合计：</view>
          <view class="bottom_text_amount">
            <!-- <view>￥</view> -->
            <view class="amount_int light">{{ orderData.pay_amount }}</view>
          </view>
        </view>
        <view class="exchange_btn" @click="submit()" v-if="is_shipped && addressData && submitStatus">提交订单</view>
        <view class="exchange_btn none" v-else>提交订单</view>
      </view>
    </my-content>
    
  </view>
</template>

<script>
import api from '../../api/index.js'
export default {
  data() {
    return {
      orderData: {
        num: 0,
      },
      ids: '',
      addressData: { id: '' },
      freight_amount: 0,
      is_shipped: false,
      submitStatus: false,
      shipping_info: '',
      goods_sku_id: 0,
      type: '',
      resultStatus: false,
      pay_type: 1,
      pay_type_arr: [
        { id: 1, name: '微信', pay_icon: 'https://www.dingxians.cn/images/box/wx_pay.png' },
        { id: 2, name: '支付宝', pay_icon: 'https://www.dingxians.cn/images/box/ali_pay.png' },
      ],
      coupon_id: 0,
    }
  },
  onLoad(option) {
    this.type = option.type
    this.goods_sku_id = option.goods_sku_id
    this.orderData.num = option.num
  },
  onShow() {
    this.getGoods()
  },

  methods: {
    changeType(pay_type) {
      this.pay_type = pay_type
    },
    splitNum(num) {
      if (typeof num == 'number') {
        return num.toString().split('.')
      } else {
        return num.split('.')
      }
    },
    getGoods() {
      uni.showLoading({
        title: '数据加载中',
      })
      this.submitStatus = false
      api.goods
        .order({
          goods_sku_id: this.goods_sku_id,
          user_address_id: this.addressData.id,
          num: this.orderData.num,
          type: this.type,
        })
        .then((res) => {
          uni.hideLoading()
          if (res.code === 200) {
            this.resultStatus = true
            this.orderData = res.data.user_prizes
            if (res.data.user_address) {
              this.addressData = res.data.user_address
            }
            this.shipping_info = res.data.shipping_info
            this.is_shipped = res.data.is_shipped
            this.coupon_id = res.data.coupon_id
            this.submitStatus = true
            if (!this.is_shipped) {
              this.show('所选地区不支持配送')
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    submit() {
      this.submitStatus = false
      // this.header(`/pages/shop/pay?user_address_id=${this.addressData.id}&goods_sku_id=${this.goods_sku_id}&type=${this.type}&pay_amount=${this.orderData.pay_amount}&num=${this.orderData.num}&type=${this.type}`)

      uni.showLoading({
        title: '订单提交中',
      })
      api.orders
        .store({
          type: this.type,
          user_address_id: this.addressData.id,
          pay_type: this.pay_type,
          num: this.orderData.num,
          goods_sku_id: this.goods_sku_id,
          coupon_id: this.coupon_id,
        })
        .then((res) => {
          uni.hideLoading()
          if (res.code === 200) {
            if (res.data.order_status == 2) {
              this.show('支付成功')
              setTimeout(() => {
                this.header('/pages/order/index')
              }, 500)
              return
            }
            // 微信支付
            if (this.pay_type == 1) {
              let pay_data = res.data.data
              uni.requestPayment({
                provider: 'wxpay',
                orderInfo: {
                  appid: pay_data.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
                  noncestr: pay_data.noncestr, // 随机字符串
                  package: pay_data.package, // 固定值
                  partnerid: pay_data.partnerid, // 微信支付商户号
                  prepayid: pay_data.prepayid, // 统一下单订单号
                  timestamp: pay_data.timestamp, // 时间戳（单位：秒）
                  sign: pay_data.sign, // 签名，这里用的 MD5/RSA 签名
                },
                success: (res) => {
                  this.header(`/pages/order/index`)
                },
                fail: (error) => {
                  this.header(`/pages/order/index`)
                },
              })
            } else if (this.pay_type == 2) {
              let pay_data = res.data.data
              uni.requestPayment({
                provider: 'alipay',
                orderInfo: pay_data,
                success: (res) => {
                  this.header(`/pages/order/index`)
                },
                fail: (error) => {
                  this.header(`/pages/order/index`)
                },
              })
            }
          } else if (res.code === 400) {
            // uni.navigateTo({ url: '/pages/user/recharge' })
            this.show('余额不足/缺少地址')
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>

<style lang="scss">
.order {
  height: 100%;
  min-height: 100vh;
  background-color: #141414;
}
.content {
  /* padding-top: 80rpx; */
  .address {
    display: flex;
    align-items: center;
    background-color: #1f1f1f;
    margin: 0 30rpx 30rpx 30rpx;
    padding: 30rpx 0;
    justify-content: space-between;
    border-radius: 10rpx;
    .address_left {
      display: flex;
      align-items: center;
      margin-left: 30rpx;
      .address_icon {
        width: 51rpx;
        height: 69rpx;
        margin-right: 40rpx;
      }
      .address_info {
        color: white;
        display: flex;
        flex-direction: column;
        /* height: 100rpx; */
        justify-content: space-between;
        font-size: 28rpx;
        &.none {
          align-items: center;
          flex-direction: row;
        }
        .address_user {
          color: white;
          display: flex;
          /* align  -items: flex-end; */

          .username {
            font-weight: bold;
            margin-right: 25rpx;
            font-size: 32rpx;
          }
          .mobile {
            font-size: 24rpx;
            align-self: flex-end;
          }
        }
        .address_detail {
          margin-top: 20rpx;
          font-size: 26rpx;
          color: #808080;
          word-break: normal;
        }
      }
    }
    .address_right {
      width: 40rpx;
      height: 40rpx;
      margin-right: 30rpx;
    }
  }
  .goods_box {
    display: flex;
    flex-direction: column;
    margin: 0 24rpx;
    background-color: #1f1f1f;
    border-radius: 5rpx;
    color: white;
    padding: 0 28rpx;
    .order_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70rpx;
      font-size: 28rpx;
      .order_label {
        /* margin-left: 30rpx; */
        font-weight: bold;
        color: #808080;
      }
      .order_text {
        /* margin-right: 30rpx; */
        display: flex;
        align-items: baseline;
        .order_text_icon {
          font-size: 28rpx;
        }
        &.order_freght_exchange {
          display: flex;
          align-items: center;
        }
        .silver_icon {
          width: 30rpx;
          height: 30rpx;
          margin-right: 10rpx;
        }
      }
      &.remark {
        height: fit-content;
        margin-top: 16rpx;
        flex-direction: column;
        align-items: flex-start;
        /*height: 210rpx;*/
        font-size: 28rpx;
        justify-content: center;
        margin-bottom: 30rpx;
      }

      .order_remark {
        width: 100%;
        box-sizing: border-box;
        height: 140rpx;
        font-size: 28rpx;
        /*margin-left: 30rpx;*/
        margin-top: 16rpx;
        padding: 20rpx;
        color: #ccc;
        background: #292929;
      }
    }
    .goods_info {
      display: flex;
      /* padding: 30rpx; */
      padding: 30rpx 0;
      .goods_image {
        width: 200rpx;
        height: 200rpx;
        margin-right: 20rpx;
      }
      .goods_item {
        width: 450rpx;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        .goods_name {
          width: 100%;
          font-size: 32rpx;
          -webkit-line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .goods_attr {
          .goods_attr_value {
            font-size: 24rpx;
            /* background-color: #f7f7f7; */
            padding: 5rpx 10rpx;
            color: #999;
          }
        }
        .goods_price_num {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          .goods_price {
            display: flex;
            align-items: baseline;
            font-size: 26rpx;
            &.goods_price_exchange {
              align-items: center;
            }
            .goods_price_int {
              font-size: 28rpx;
            }
            .silver_icon {
              width: 30rpx;
              height: 30rpx;
              margin-right: 10rpx;
            }
          }
          .goods_num {
            // display: flex;
            // justify-content: flex-end;
            color: #999;
            font-size: 26rpx;
          }
        }
      }
    }

    .divier {
      margin: 0 auto;
      width: 650rpx;
      height: 2rpx;
      margin-bottom: 12rpx;
      background-color: #292929;
    }
  }

  .pay_box {
    display: flex;
    flex-direction: column;
    width: 660rpx;
    margin: 30rpx auto;
    padding: 10rpx 28rpx;
    background-color: #1f1f1f;
    border-radius: 10rpx;
    color: white;
    font-size: 28rpx;
    .pay_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      .pay_left {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        .pay_icon {
          width: 50rpx;
          height: 50rpx;
          margin-right: 20rpx;
        }
      }
      .pay_selected {
        width: 48rpx;
        height: 48rpx;
        /* margin-right: 20rpx; */
      }
    }
  }
  .exchange {
    padding: 28rpx;
    font-size: 26rpx;
    color: #808080;
    background-color: #1f1f1f;
    width: 660rpx;
    margin: 30rpx auto;
    border-radius: 5rpx;
  }
  .bottom {
    display: flex;
    /* justify-content: flex-end; */
    justify-content: space-between;
    position: fixed;
    bottom: 0rpx;
    left: 0;
    width: 100%;
    height: 112rpx;
    background-color: #141414;
    align-items: center;
    color: white;
    box-sizing: border-box;
    padding: 0 28rpx;
    .bottom_text {
      display: flex;
      align-items: baseline;
      font-size: 24rpx;
      .light {
        color: #ded000;
      }
      .bottom_text_num {
        margin-right: 10rpx;
      }
      .bottom_text_amount {
        font-weight: bold;
        margin-right: 10rpx;
        display: flex;
        align-items: baseline;
        .amount_int {
          /* font-size: 40rpx; */
          font-size: 32rpx;
          font-weight: bold;
        }
      }
      .bottom_txt {
        font-weight: bold;
      }
    }
    .exchange_btn {
      height: 84rpx;
      line-height: 84rpx;
      background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-primary-small.png');
      background-size: 100% 100%;
      text-align: center;
      width: 228rpx;
      /* margin: 0 20rpx; */
      border-radius: 10rpx;
      font-size: 24rpx;
      color: #fff;
      &.none {
        filter: grayscale(1);
      }
    }
  }
}
</style>
